﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title>更换头像-LayuiCMSluyun</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all" />
    <script src="../../plugins/jquery.min.js"></script>
    <script src="../../plugins/layui/layui.js"></script>
    <style>
        .userImg {
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
        }
    </style>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>当前头像信息</legend>
    </fieldset>
    <table class="layui-table">
        <thead>
            <tr>
                <th width="400"><strong>图片路径</strong></th>
                <th><strong>头像预览</strong></th>
                <th><strong>状态</strong></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <a href="" id="thisIconA" target="_blank"></a>
                </td>
                <td>
                    <img src="" class="userIconAs userImg" id="thisIcon" onerror="imgError()">
                </td>
                <td>当前头像</td>
            </tr>
        </tbody>
    </table>

    <br />

    <fieldset class="layui-elem-field layui-field-title">
        <legend>更换头像</legend>
    </fieldset>
    <div style="margin:0px auto;width:363px;">
        <div class="layui-upload-drag" style="width:300px;" id="selectImgBtn">
            <i class="layui-icon"></i>
            <p>点击选择图片,或将图片拖拽到此处</p>
            <br />
            <p style="color:#FFB800;text-align:center">
                只能选择1张,图片大小不能超过 2048 KB
            </p>
        </div>
    </div>
    <table class="layui-table">
        <thead>
            <tr>
                <th><strong>图片文件名</strong></th>
                <th><strong>头像预览</strong></th>
                <th><strong>大小</strong></th>
                <th><strong>状态</strong></th>
                <th><strong>操作</strong></th>
            </tr>
        </thead>
        <tbody id="demoList">
            <!--<tr>
                <td>默认的头像</td>
                <td>
                    <img src="/Content/images/uploads/admin/userface4.jpg" class="userIconAs userImg" onerror="javascript:this.src='/Content/images/face.jpg'">
                </td>
                <td>200KB</td>
                <td>等待上传</td>
                <td>
                    <button class="layui-btn layui-btn-xs demo-reload layui-hide"><i class="layui-icon">&#xe62f;</i>重传</button>
                    <button class="layui-btn layui-btn-xs layui-btn-danger demo-delete"><i class="layui-icon">&#xe640;</i>删除</button>
                </td>
            </tr>-->
        </tbody>
    </table>
    <br />
    <div style="margin:0px auto;width:140px;">
        <br />
        <p style="text-align:center">
            <button style="width:140px;" onclick="isUpload()" id="uploadImgbtn" class="layui-btn layui-btn-normal layui-btn-lg"><i
                    class="layui-icon">&#xe62f;</i>确认上传</button>
        </p>
    </div>
    <script>
        function isUpload() {
            if ($('#demoList').html() === '') {
                layer.msg("请先选择图片再上传", { anim: 10, icon: 0 });
            }
            layer.msg('layui的upload组件不支持get请求，所以我演示不了。抱歉~ 不过有代码,请自行查看本页代码.', { anim: 10, icon: 0 });
        }

        $(function () {

            layui.use(['upload'], function () {
                var upload = layui.upload;
                LoadThisIcon();


                var demoListView = $('#demoList').html('');
                var uploadListIns =
                    upload.render({
                        elem: '#selectImgBtn'
                        , url: '../../services/data/userImgUpload.json'
                        , data: {
                            name: function () {
                                //文件后缀名
                                return $(".fileName:first").text().substr($(".fileName:first").text().lastIndexOf("."));
                            }
                        }
                        , accept: 'images'
                        , acceptMime: 'image/*'
                        , auto: false
                        , bindAction: '#uploadImgbtn'
                        , size: 2048
                        , multiple: false
                        , number: 1
                        , choose: function (obj) {
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

                            $('.demo-delete').each(function () {
                                //每次上传之前把其他图片删了
                                this.click();
                            });

                            obj.preview(function (index, file, result) {
                                var tr = $(['<tr id="upload-' + index + '">'
                                    , '<td class="fileName" >' + file.name + '</td>'
                                    , '<td><img src="' + result + '" class="userIconAs userImg" ></td>'
                                    , '<td>' + (file.size / 1014).toFixed(1) + 'KB</td>'
                                    , '<td>等待上传</td>'
                                    , '<td>'
                                    , '<button class="layui-btn layui-btn-xs demo-reload layui-hide"><i class="layui-icon">&#xe62f;</i>重传</button>'
                                    , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete"><i class="layui-icon">&#xe640;</i>删除</button>'
                                    , '</td>'
                                    , '</tr>'].join(''));

                                //单个重传
                                tr.find('.demo-reload').on('click', function () {
                                    obj.upload(index, file);
                                });

                                //删除
                                tr.find('.demo-delete').on('click', function () {
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                });

                                demoListView.append(tr);
                            });
                        }
                        , before: function (obj) {

                        }
                        , done: function (result, index, upload) {
                            if (result.code == 200) {
                                var tr = demoListView.find('tr#upload-' + index)
                                    , tds = tr.children();
                                tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');

                                tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
                                tds.eq(4).find('.demo-reload').addClass('layui-hide'); //再隐藏重传

                                layer.msg("头像已成功更换.", { anim: 10, icon: 1 });
                                LoadThisIcon();

                                $('.demo-delete').each(function () {
                                    //删除所有队列里的头像
                                    this.click();
                                });

                            } else {

                                this.error(index, upload);
                                console.warn(result.msg);

                            }
                        }
                        , error: function (index, upload) {
                            var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                            tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        }
                    });

            });



        });

        function LoadThisIcon() {
            //这里做更换成功后的头像刷新操作
            // $.ajax({
            //     type: 'post'
            //     , url: "/api/Home/GetUserInfo/"
            //     , contentType: 'application/json'
            //     , data: '{}'
            //     , dataType: 'json'
            //     , headers: {
            //         'Access-Token': getCookie('loginUser')
            //     }
            //     , success: function (result) {
            //         if (result.code == 'SUCCESS') {
            //             result.data = JSON.parse(result.data)[0];
            //             $('#thisIcon').attr('src', result.data.icon + '?shuijishu=' + Math.random());
            //             $('#thisIconA').attr('href', result.data.icon + '?shuijishu=' + Math.random()).text(result.data.icon);
            //         } else {
            //             if (result.statusCode === "401") {
            //                 top.layer.confirm(result.msg, {
            //                     btn: ['确定'], title: "用户状态提示", icon: 0, shade: 0.9, anim: 6, closeBtn: 0, isOutAnim: false, scrollbar: false, id: "yanOpen"
            //                 }, function () {
            //                     clearCookie();
            //                     top.sessionStorage.clear();
            //                     top.location.href = '/Login.html';
            //                 });
            //             } else {
            //                 layer.msg('获取用户信息失败。');
            //                 console.warn(result.msg);
            //             }
            //         }
            //     }
            //     , error: function (ex) {
            //         console.warn(ex.responseText);
            //     }
            //     , complete: function (XMLHttpRequest, textStatus) {
            //         if (XMLHttpRequest.responseJSON.token != null) {
            //             setCookie("loginUser", XMLHttpRequest.responseJSON.token);
            //         }
            //     }
            // });
        }

        function imgError() {
            //如果发生了错误。用默认的头像。
            var path = '../../images/face.jpg';
            $('#thisIcon').attr('src', path);
            $('#thisIconA').attr('href', path).text(path);
        }
    </script>
</body>

</html>